<template>
  <div class="business-info">
    <!-- top -->
    <div class="info">
      <div class="info-top flexRBC">
        <div :title="'id:'+business.id" class="left flexRBC">
          <img v-if="business.logoUrl" :src="fileBaseUrl+business.logoUrl" alt>
          <div>
            <div class="company-short-name">{{ business.name }}</div>
            <div class="company-name">{{ business.fullName }}</div>
          </div>
        </div>
        <div v-if="businessInfo.syncTmpMerchantId" class="flowInfoContent">
          <el-card>
            <div class="mg-b-10">当前套餐：<span class="moneyColor">{{ flowInfo.pkgTempName }}</span></div>
            <div class="mg-b-10">
              叠加套餐：<span class="moneyColor">{{ flowInfo.overlay }}</span>
              <el-popover
                v-if="flowInfo.overlay !='无'"
                width="300"
                trigger="click"
              >
                <div v-for="(item,index) in superArr" :key="index">
                  {{ item }}
                </div>
                <el-button slot="reference" round type="primary" size="small" style="margin-left: 5px;" @click="supeInfo">详情</el-button>
              </el-popover>

            </div>
            <div class="mg-b-10">剩余交互次数：
              <span class="moneyColor">{{ flowInfo.restrictFlag == '0' ? flowInfo.packageFlowBalance : '不限量' }}</span>
            </div>
            <div>到期时间：<span v-show="flowInfo.pkgEndTime" class="">{{ $dateFtt('yyyy-MM-dd', new Date(flowInfo.pkgEndTime)) }}</span></div>
          </el-card>
          <el-card class="mg-l-20">
            <div class="mg-b-10">流量余额：<span class="moneyColor">{{ flowInfo.symbolAccFlowBalance === '-'? flowInfo.symbolAccFlowBalance+flowInfo.accountFlowBalance: flowInfo.accountFlowBalance }}</span></div>
            <el-button round type="primary" size="small" @click="showHis">记录</el-button>
          </el-card>
        </div>
        <el-button
          v-if="!$store.getters.banBtnList.includes('BTN_BUSSINESS_EDIT')"
          type="primary"
          size="medium"
          round
          @click="goBusinessInfoEdit"
        >修改商户资料</el-button>
      </div>

      <div class="info-content">
        <el-row>
          <el-col :xs="12" :sm="12" :md="8" :lg="8">
            <info-list-card :data="vipInfoCard_1" />
          </el-col>
          <el-col :xs="12" :sm="12" :md="8" :lg="8">
            <info-list-card :data="vipInfoCard_2" />
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="tab">
      <el-tabs v-model="tabName" @tab-click="handleTabClick">
        <el-tab-pane label="我的门店" name="info">
          <business-store-list />
        </el-tab-pane>
        <el-tab-pane
          v-if="businessInfo.syncTmpMerchantId"
          label="我的套餐流量"
          name="flow"
        >
          <BusinessFlowList :tab-name="tabName" />
        </el-tab-pane>
        <el-tab-pane
          v-if="!$store.getters.banBtnList.includes('MCH_TAB_TAG_MANAGE')"
          label="我的标签"
          name="tag"
        >
          <BusinessTag :tab-name="tabName" />
        </el-tab-pane>
        <el-tab-pane
          v-if="
            !$store.getters.banBtnList.includes('BTN_DEVICE_ADD') ||
              !$store.getters.banBtnList.includes('BTN_DEVICE_EDIT') ||
              !$store.getters.banBtnList.includes('BTN_DEVICE_STATUA_MANAGE')
          "
          label="我的终端"
          name="device"
        >
          <business-device :business="business" :tab-name="tabName" />
        </el-tab-pane>
        <el-tab-pane
          v-if="
            !$store.getters.banBtnList.includes('BTN_PRINTER_ADD') ||
              !$store.getters.banBtnList.includes('BTN_PRINTER_EDIT') ||
              !$store.getters.banBtnList.includes('BTN_PRINTER_STATUS_MANAGE') ||
              !$store.getters.banBtnList.includes('BTN_PRINTER_DELETE')
          "
          label="我的打印机"
          name="printer"
        >
          <business-printer :business="business" :tab-name="tabName" />
        </el-tab-pane>
        <el-tab-pane
          v-if="
            businessInfo.syncTmpMerchantId&&(
              !$store.getters.banBtnList.includes('BTN_SPEAKER_ADD') ||
              !$store.getters.banBtnList.includes('BTN_SPEAKER_EDIT') ||
              !$store.getters.banBtnList.includes('BTN_SPEAKER_STATUS_MANAGE') ||
              !$store.getters.banBtnList.includes('BTN_SPEAKER_DELETE'))
          "
          label="我的云音响"
          name="speaker"
        >
          <business-speaker :business="business" :tab-name="tabName" />
        </el-tab-pane>

        <el-tab-pane
          v-if="
            !$store.getters.banBtnList.includes('BTN_STAFF_ADD') ||
              !$store.getters.banBtnList.includes('BTN_STAFF_APPROVE') ||
              !$store.getters.banBtnList.includes('BTN_STAFF_CODE_RESET') ||
              !$store.getters.banBtnList.includes('BTN_STAFF_DELETE') ||
              !$store.getters.banBtnList.includes('BTN_STAFF_BIND_WX') ||
              !$store.getters.banBtnList.includes('BTN_STAFF_EDIT')
          "
          label="员工管理"
          name="user"
        >
          <business-user :business="business" :tab-name="tabName" />
        </el-tab-pane>
        <el-tab-pane
          v-if="
            !$store.getters.banBtnList.includes('BTN_ROLE_ADD') ||
              !$store.getters.banBtnList.includes('BTN_ROLE_EDIT') ||
              !$store.getters.banBtnList.includes('BTN_ROLE_DELETE')
          "
          label="权限管理"
          name="role"
        >
          <business-role :tab-name="tabName" />
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog title="商户流量余额记录" :visible.sync="hisVisible" width="80%">
      <BusinessFlowHis v-if="hisVisible" />
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="hisVisible = false">取 消</el-button>
        <el-button type="primary" @click="hisVisible = false">确 定</el-button>
      </span> -->
    </el-dialog>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import BusinessRole from './components/BusinessRole'
import BusinessUser from './components/BusinessUser'
import BusinessDevice from './components/BusinessDevice'
import BusinessPrinter from './components/BusinessPrinter'
import BusinessSpeaker from './components/BusinessSpeaker'
import BusinessStoreList from './components/BusinessStoreList'
import BusinessTag from './components/BusinessTag'
import BusinessFlowHis from './components/BusinessFlowHis'
import BusinessFlowList from './components/BusinessFlowList'
import { getBusinessInfo, getPackageAndBalance, mercPkgOverLayInfo } from '@/api/business'
export default {
  components: {
    BusinessUser,
    BusinessFlowList,
    BusinessFlowHis,
    BusinessRole,
    BusinessDevice,
    BusinessPrinter,
    BusinessSpeaker,
    BusinessStoreList,
    BusinessTag
  },
  data() {
    return {

      hisVisible: false,
      flowInfo: {},
      hisData: {},
      // 配置
      tabName: 'info',
      // 数据
      vipInfoCard_1: [
        { name: '签约套餐', value: '/' },
        { name: '门店数量', value: '/' },
        { name: '行业', value: '/' },
        { name: '地址', value: '/' }
      ],
      vipInfoCard_2: [
        { name: '负责人', value: '/' },
        { name: '手机号码', value: '/' },
        { name: '联系邮箱', value: '/' }
      ],

      business: {
        id: ''
      },
      superArr: []
    }
  },
  computed: {
    ...mapGetters(['fileBaseUrl', 'businessInfo'])
  },
  mounted() {
    this.fetchData()
    this.getFlow()
  },
  methods: {
    // 叠加详情
    supeInfo() {
      this.getMercPkgOverLayInfo()
    },
    // 叠加套餐列表接口
    getMercPkgOverLayInfo() {
      mercPkgOverLayInfo({ merchantId: this.businessInfo.syncTmpMerchantId }).then(res => {
        // console.log('叠加套餐列表接口+++++', res)
        if (res.succeed) {
          this.superArr = res.data
        }
      })
    },
    getFlow() {
      if (!this.businessInfo.syncTmpMerchantId) {
        console.warn('不存在同步数据 syncTmpMerchantId')
        return
      }
      getPackageAndBalance({
        merchantId: this.businessInfo.syncTmpMerchantId
      }).then(res => {
        console.log('res+++++++++', res)
        this.flowInfo = res.data
      })
    },
    showHis() {
      if (!this.businessInfo.syncTmpMerchantId) {
        console.warn('不存在同步数据 syncTmpMerchantId')
        return
      }
      // 展示流量记录
      this.hisData = {}
      this.hisVisible = true
    },
    /**
     * 获取数据
     */
    // 获取商户信息
    fetchData() {
      getBusinessInfo().then((res) => {
        this.business = res.data
        this.vipInfoCard_1 = [
          { name: '门店数量', value: this.business.shopNum },
          { name: '行业', value: this.business.firstClass },
          { name: '地址', value: this.business.address }
        ]
        this.vipInfoCard_2 = [
          { name: '负责人', value: this.business.principal },
          { name: '手机号码', value: this.business.mobilePhone },
          { name: '联系邮箱', value: this.business.email }
        ]
      })
    },

    /**
     * 按钮组
     */
    //  跳转
    goBusinessInfoEdit() {
      this.$router.push({
        name: 'BusinessInfoEdit'
      })
    },

    // 切换tab栏
    handleTabClick(tab, event) {}
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.flowInfoContent {
  display: flex;
  /deep/.el-card__body {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
  }
  .moneyColor {
    color: #ffb72f;
  }
}
.info {
  padding: 24px 30px;
  border-radius: 5px 5px 0 0;
  background-color: #fff;
  &-top {
    padding-bottom: 24px;
    border-bottom: 1px solid #e7e7e7;
    img {
      vertical-align: top;
      width: 60px;
      height: 60px;
      margin-right: 20px;
      border-radius: 50%;
      border: 1px solid #e7e7e7;
    }
    .company-short-name {
      font-size: 24px;
      margin-bottom: 5px;
      font-weight: bold;
    }
    .company-name {
      font-size: 14px;
    }
  }
  &-content {
    margin: 24px 0 0 45px;
  }
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
/* reset element*/
.business-info {
  .el-tabs__header {
    padding-left: 30px;
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 0 0 5px 5px;
  }
  .el-tabs__nav-wrap::after {
    background-color: #fff;
  }
  .el-tabs__active-bar {
    height: 4px;
  }
}
</style>
